<template>
  <div
    class="form_comps_body status_animation_getme"
    animationisban="false"
    id="comps_body"
  >
    <div class="comps_arr_settings_body setting_body" id="arr_setting">
      <div class="set_funcs" id="set_funcs">
        <div class="setting_func">全选</div>
      </div>
    </div>
    <div class="form_addNewComps disnone" id="comps_arr">132546</div>
    <div class="form_comps_arr" id="wait_comps">
      <div class="uni_comp bunt_getme" id="wait_ssss" value="ssss">
        <span class="comp_text" id="comp_text">ssss</span>
        <button
          class="comp_func_btn wait_comp func_add_btn cursorPointer"
          id="add_btn"
        >
          添加
        </button>
      </div>
      <div class="uni_comp bunt_getme" id="wait_vasl" value="vasl">
        <span class="comp_text" id="comp_text">vasl</span>
        <button
          class="comp_func_btn wait_comp func_add_btn cursorPointer"
          id="add_btn"
        >
          添加
        </button>
      </div>
    </div>
    <div
      class="comps_selected_settings_body setting_body"
      id="selectedcomps_arr_setting"
    >
      <div class="set_funcs" id="set_funcs">
        <div class="setting_func">全选</div>
      </div>
    </div>
    <div class="form_comps_arr form_comps_selected" id="active_comps">
      <!-- <div
        class="uni_comp selected_comp bunt_getme"
        id="selected_a367"
        value="a367"
      >
        <span class="comp_text" id="comp_text">a367</span>
        <button
          class="comp_func_btn func_remove_btn cursorPointer"
          id="remove_btn"
        >
          移除
        </button> 
      </div> -->
    </div>
    <div class="bottom_btns_body" id="btns_func">
      <div class="btns" id="btns">
        <button class="form_certain_btn" id="certain_btn">应用0</button>
        <button class="form_certain_btn" id="certain_btn0">应用1</button>
      </div>
    </div>
    <button id="a351">点我重置 组件顺序</button>
    <div class="bunt_getme" value="ssss">
      <button id="addcomps351">点我 添加 ssss 组件</button>
    </div>
    <div class="bunt_getme" value="vasl">
      <button id="removecomps351">点我 删除 vasl 组件</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

import { longestChildArr_n2 } from '../../components/aaanewApp/global/digitalFunc/longestChildIncreaseArr/longestIncreaseArr2';

import {
  setStartSelectedComps,
  addCompsH,
  massClassHandler,
  totalComps,
  reorderComps,
} from './TaddNewComsFunc';

import { registerElPosition } from '../../components/aaanewApp/global/fromToAnimate/digitalWeightChangeAnima/digitalWeightChangeFunc';

import { getChildElArr } from '../../components/aaanewApp/global/element/getChildElArr';
import { settimeNth } from '../../components/aaanewApp/global/global';

// import { importFormTable } from '../../components/aaanewApp/components/addFilm/uni/formTable/formtable';

// import { fromtoAnimaF } from '../../components/aaanewApp/global/fromToAnimate/fromToAnimaFunc';
// import { getElementViewOffsetPosi } from '../../components/aaanewApp/global/element/getElementViewOffsetPosi';
// import { spliteMatrix } from '../../components/aaanewApp/global/global';

onMounted(() => {
  init();
  let queue2 = longestChildArr_n2([5, 8, 3, 6, 12]);
  registerElPosition(document.getElementById('active_comps'), totalComps);
  console.log(queue2);

  getChildElArr(document.getElementById('wait_comps'), 'wait_ssss');

  //   fromtoAnimaF(document.getElementById('wait_ssss')).fromElto(
  //     document.getElementById('wait_vasl'),
  //     document.getElementById('wait_ssss')
  //   );
  settimeNth([10000], () => {
    reorderComps();
  });

  /**
   * viewoffset 为什么总有偏差 一个像素 测试 一般常见问题 系统给的 数据有偏差 放大 是好的 缩小就有 1px 左偏移
   */
  //   let clonode = document.getElementById('selected_e9325');
  //   for (; clonode != null; clonode = clonode.offsetParent) {
  //     let compEl = window.getComputedStyle(clonode);
  //     console.log(
  //       clonode,
  //       clonode.id,
  //       '\n\toffsetLeft:'+clonode.offsetLeft,
  //       '\n\ttransform:' + spliteMatrix(compEl['transform'], 'translateX')
  //     );
  //   }
  //   console.log(
  //     getElementViewOffsetPosi(document.getElementById('selected_e9325'))
  //       .offsetLeft
  //   );
});

function init() {
  //   let a351El = document.getElementById('a351');
  //   a351El.addEventListener('click', reorderComps);

  setStartSelectedComps(['a367', 'e9325', 'vasl']);

  //   let removecomps351El = document.getElementById('removecomps351');
  //   removecomps351El.addEventListener('click', removeCompsH);

  //   let addcomps351El = document.getElementById('remove_btn');
  //   addcomps351El.addEventListener('click', removeCompsH);

  /**
   * 添加 等待 组件中的 add 事件
   */
  massClassHandler('wait_comp', 'click', addCompsH);
}
</script>

<style scoped lang="scss">
.form_addNewComps {
  position: absolute;
  width: 20%;
  aspect-ratio: 1 / 0.8;
  background-color: #f34;
}
</style>

<style>
.form_comps_body {
  padding: 2% 2% 3% 2%;
  border-radius: 5px;
  background-color: #663;
  display: grid;
  grid-template-areas:
    'compsArrSet b selectedArrSet'
    'compsArr b selectedArr'
    'btnfunc btnfunc btnfunc';
  grid-template-columns: 1fr 50px 1fr;
}
/* .setting_body {
} */

.comps_arr_settings_body {
  grid-area: compsArrSet;
}
.form_comps_arr {
  position: relative;

  grid-area: compsArr;

  background-color: #ac3456;

  margin-top: 10px;

  min-width: 200px;
  min-height: 300px;
}

.uni_comp {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .comp_text {
  display: inline-block; 
}  */

.comp_func_btn {
  padding: 5px 10px;
  font-size: 20px;
}

.comps_selected_settings_body {
  grid-area: selectedArrSet;
}
.form_comps_selected {
  grid-area: selectedArr;
}

.bottom_btns_body {
  grid-area: btnfunc;
  margin-top: 20px;
}

.btns {
  float: right;
}
.form_certain_btn {
  margin: 0 0 0 20px;
}

.rebackCompsAnimation {
  overflow: hidden;
  animation-name: rebackCompsAnima;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

@keyframes rebackCompsAnima {
  0% {
    transform: translateX(-50px);

    opacity: 0;
    max-height: 0px;
  }
  50% {
    transform: translateX(-40px);

    opacity: 0;
    max-height: 100px;
  }
  100% {
  }
}

.removeCompsAnimation {
  overflow: hidden;
  animation-name: removeCompsAnima;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

@keyframes removeCompsAnima {
  0% {
  }
  50% {
    transform: translateX(-50px);

    opacity: 0;
    max-height: var(--clientHeight);
  }
  100% {
    opacity: 0;
    max-height: 0px;
  }
}

.testEl {
  background-color: #a36457;
  position: absolute;
}
</style>
